import Link from 'next/link'
import Router from 'next/router'
import {} from 'antd'
import { useState } from 'react'
import { MessageOutlined } from '@ant-design/icons'

import '../../static/style/components/article.less'
import AddComment from './addComment'
const CommentComponent = (prop) => {
  const article = prop.data
  const [showComment, setShowComment] = useState(false)
  let commentBtn
  if (showComment) {
    commentBtn = (
      <div className='control-comment' onClick={() => setShowComment(false)}>
        <MessageOutlined />
        <span className='text'>隐藏评论</span>
      </div>
    )
  } else if (article.commentCount > 0) {
    commentBtn = (
      <div className='control-comment' onClick={() => setShowComment(true)}>
        <MessageOutlined />
        <span className='text'>显示评论</span>
      </div>
    )
  } else {
    commentBtn = (
      <div className='control-comment' onClick={() => setShowComment(true)}>
        <MessageOutlined />
        <span className='text'>添加评论</span>
      </div>
    )
  }

  let showCommentList
  if (showComment) {
    showCommentList = (
      <>
        <AddComment />
        {/* <ul className='comment-list'>
          <li className='comment-item'></li>
        </ul> */}
      </>
    )
  } else {
    showCommentList = ''
  }

  return (
    <div className='comment'>
      {/* 评论按钮 */}
      {commentBtn}
      {showCommentList}
    </div>
  )
}

export default CommentComponent
